<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>个人博客</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!-- 样式初始化 自定义文件 -->
    <link rel="stylesheet" href="../css/index.css">
    <!-- 下面所有都是库文件 -->
    <link rel="stylesheet" href="../newtp/lib/weui.min.css">
    <link rel="stylesheet" href="../newtp/css/jquery-weui.css">
    <link rel="stylesheet" href="../newtp/css/theme.css">
    <script src="../newtp/lib/jquery-2.1.4.js"></script>
    <script src="../newtp/lib/fastclick.js"></script>
    <script src="../newtp/js/jquery-weui.js"></script>
<style>
/*最外层*/
.page-container{height: 100%;width: 100%;  overflow: hidden; }
/*顶部*/
.page-top{ height: 50px; top:0; background:#fff; }
.g-back{ float: left; width: 80px;  height: 50px;background: url(../img/g_03.png) center no-repeat; background-size: 18px; }
.g-other{float: right;width: 80px; height: 50px;}
.t-title{ display:block; line-height: 50px; width: 100%;  text-align: center; }
/*内容容器*/
/*内容*/
.page-wrap{ height: 100%; width: 100%; background:#f8f8f8;overflow-y: auto; }
.p-head{position: relative; height: 240px; background:#2e6aee; overflow: hidden;  }
.p-head .bg-img{position: absolute; top:0; left: 0; width: 100%;  }
.p-head .img-outer{ position: absolute; top:0; left: 0; width: 100%; height: 100%; }
.p-head p{ color:#fff; }
.p-head .r-img{display:block;margin:0 auto;margin-top: 18px; width: 75px;height: 75px;border-radius:50%;}
.p-head .name{width:100%;line-height: 25px; font-size:15px;text-align:center; }
.p-head .liang{width:100%;margin-bottom:8px;line-height: 15px; font-size:10px;text-align:center;font-weight:100;}
.p-head-botm{ width: 100%; height: 100px;border-radius:12px 12px 0 0; background: #fff;}
.p-head-botm ul{padding:0 15px;overflow: hidden;}
.p-head-botm li{ float:left;width:33.3%; height:48px; overflow: hidden;   }
.p-head-botm li.active{ color:#2778ff; }
.p-head-botm li div{ position: relative; margin:10px auto;  width: 55px; line-height: 28px;  font-size:14px;  }
.p-head-botm li i{display: inline-block; vertical-align: middle; width:22px;height: 20px;}
.p-head-botm li span{ position:absolute; left:50px; top:-6px; padding:0 3px;  min-width: 15px; height: 15px;line-height: 15px;
    text-align: center; border-radius:8px;background: red;color:#fff;font-size: 10px;
}
.p-head-botm form{position: relative; margin:0 15px; height: 30px;  }
.p-head-botm input{margin-top: 2px; height: 30px;line-height: 30px; border-radius:3px; font-size:14px; }
input[type=text]{ width: 100%; padding:0 40px 0 7px; background: #f3f4f9; }
input[type=button]{position: absolute; right: 0;top:0; background: #3095fd; width:40px;text-align: center;color: #fff; }
/*留言板*/
.p-liuyan{ margin-bottom:10px; overflow: hidden; padding:10px 15px; margin-top: 10px;background: #fff;   align-items: flex-start; }
.p-liuyan p,.p-liuyan li{word-wrap:break-word; }
.p-l-img{ height: 100%; width:45px;  }
.p-l-img img{position: relative; top:0;  height:38px; width:38px; border-radius: 50%; border:0;  }
.p-l-cont{float: left;height: 100%; width:300px; font-size: 14px;}
.p-l-time{padding:2px 0 5px 0; font-size: 10px; color: #929292;}
.p-l-num{line-height: 15px; font-size: 10px; color: #929292;}
.p-l-num a{float: right;width: 20px;height: 15px;margin-left: 5px;}
.p-b-text{ padding:5px 0;  }
.p-l-text{ margin-top:7px; background: #eaedf4;}
.p-l-text i{margin: -10px 0 0 10px; float:left;border:5px solid transparent;border-bottom-color:#eaedf4;} 
.p-l-text p{padding:5px 5px 5px 25px;border-bottom: 1px solid #ccc;}
.p-l-text .ico-z{float:left;margin-left: -20px; height:20px;width: 20px;}
.p-l-text ul{padding:5px;}
/*箭头图标*/
.g-left{ background:url(../img/rr_03.png) right center no-repeat; background-size: 7px 14px; }
.g-down{ background:url(../img/down_06.png) right center no-repeat; background-size: 14px 8px; }
.g-up{ background:url(../img/up_03.png) right center no-repeat; background-size: 13px 7px; }
.color1{ color: #335382; }
/*背景图标*/
.bg1{ background: url(../img/pp.png) no-repeat; background-size:21px 19px; }
.bg2{ background: url(../img/y3_03.png) no-repeat; background-size: 21px 19px; }
.bg3{ background: url(../img/ht_03.png) no-repeat; background-size: 21px 19px; }
.active .bg1{ background: url(../img/p2.png) no-repeat; background-size:21px 19px; }
.active .bg2{ background: url(../img/p3.png) no-repeat; background-size: 21px 19px; }
.active .bg3{ background: url(../img/p1.png) no-repeat; background-size: 21px 19px; }
.bg4{ background: url(../img/ty_07.jpg) no-repeat; background-size: 18px 16px; }
.bg5{ background: url(../img/xxx_09.jpg) no-repeat; background-size: 19px 16px; }
.bg6{ background: url(../img/x2_03.jpg) center 5px no-repeat; background-size: 17px 15px; }
/*相册*/
.xiangce{padding:10px 5px;overflow: hidden;background: #fff; margin-top: 10px; }
.xiangce li{float: left;  width: 50%;  height: 250px;  padding:5px; max-width: 200px; }
.xiangce a{ display: block; position: relative; width: 100%; height:100%;  border:1px solid #ccc;background: #fff; overflow: hidden; }
.xiangce a img{  margin-left:50%; margin-top:50%; transform: translate(-50%, -50%); width: 100%; }
.xiangce a p{position: absolute; width: 100%; bottom: 0; left: 0;  height: 50px; padding: 30px 7px 0 7px;font-size: 10px;color: #fff;
    background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,0.8));}    
.xiangce .right{ text-align: right; }
/*文章列表*/
.text-list{margin-top: 10px; padding:15px; overflow: hidden; background:#fff; }
/*.text-list h4{padding:15px 0;font-size: 35px; font-weight: bold;}*/
.text-list p{font-size: 15px;  /*text-indent: 2em; */ }
.text-list div{ height: 30px; line-height: 30px; font-size: 10px; color:#666; border-bottom: 1px solid #eee;}
.text-list div img{ width: 15px;height: 15px;border-radius: 50%; vertical-align: middle;}
.text-list div span{ padding-left:15px; display: inline-block; vertical-align: middle;}
/*查看文章*/
.textCont{ padding:15px; background: #fff; margin-top: 10px; } 
.textCont h4{font-size: 17px; font-weight: bold; } 
.textCont div{margin:10px 0;  } 
.textCont div img{float: left; width: 38px; height: 38px; border-radius: 50%;} 
.textCont div span{ display: block;padding-left: 45px; height: 19px;} 
.textCont .name{ font-size: 12px;  } 
.textCont .time{ font-size: 10px;color: #666;  } 
.textCont p{ margin-top: 1px;font-size: 15px;color: #666;text-indent: 2em;color: #111;} 
</style>
</head>
<body>
<div class="page-container">
      <div class="weui-tab">
             <!-- 头部 -->
              <div class="weui-navbar page-top">
                      <a  href="javascript:history.back(-1);" class="g-back"></a>                   
                      <span class="t-title">我的博客</span>  
                      <a  class="g-other"></a>
              </div>
              <!-- 内容区 -->
              <div class="weui-tab__bd page-wrap" >

                      <div class="p-head">
                              <img src="../img/bg/bk_02.png"  class="bg-img">
                              <div class="img-outer">
                                    <img class="r-img" src="../img/t5.png" />
                                    <p class="name">赵丽丽 老师</p>
                                    <p class="liang">今日访问量:<span>20</span> 总浏览量:<span>150000</span></p>
                                    <div class="p-head-botm">
                                           <ul>
                                                 <li class="active"><div><i class="bg1"></i>动态<span>22</span></div></li>
                                                 <li><div><i class="bg2"></i>文章<span>2</span></div></li>
                                                 <li><div><i class="bg3"></i>相册<span>2</span></div></li>
                                           </ul>
                                           <form>
                                                   <input id="ssInp" type="text" placeholder="说点什么">
                                                   <input id="ssBtn" type="button" value="提交">
                                           </form>                                           
                                    </div>
                             </div>
                      </div>
                      <!-- 留言板 -->
                      <div id="cont-wrap" >
                             <div class="weui-cell p-liuyan">
                                   <div class="weui-cell__hd p-l-img"><img src="../img/t5.png" ></div>
                                   <div class="weui-cell__bd p-l-cont">
                                      <p>张晓玲 老师</p>
                                      <p class="p-l-time">2018/6/18 08:55</p>
                                      <p class="p-b-text">都是固定价格地方就 地方就 京东方绝对是简单绝对广东省分公司电饭锅的个是大法官地方上的双方都</p>
                                      <p class="p-l-num">浏览<span>55</span>次 <a class="bg5"></a><a class="bg4"></a></p>
                                      <div style="height: 25px; position: relative;margin-top: 5px;display: none;">
                                             <input type="text" style="position: absolute;height: 100%; width: 100%;background: #f2f2f2;padding:0 35px 0 5px;">
                                             <a class="plBtn" style="position: absolute; width: 30px;line-height: 25px; font-size: 12px; right:0;">评论</a>
                                      </div>
                                      <div class="p-l-text">
                                             <i></i>
                                             <p>
                                                <span class="ico-z bg6"></span>
                                                <span class="color1 zan-role">小娟老师, 王晓丽家长, 王小龙老师</span>
                                                等
                                                <span class="color1 zan-num">3</span>
                                                人觉得很赞
                                             </p>
                                             <ul class="liuyans">
                                                <li><span class="color1">王晓丽的家长 : </span><span>真好！</span></li>
                                                <li><span class="color1">知春的家长 : </span><span>以后我们就有自己的圈子啦！</span></li>
                                             </ul>
                                      </div>
                                   </div>
                             </div>
                           
                      </div>
                      <!-- 相册 -->
                      <!-- <ul class="xiangce">
                              <li>
                                    <a href="###">
                                          <img src="" alt="">
                                          <p>
                                                 <span class="left">asdf</span>
                                                 <span class="right">adddd</span>
                                          </p>
                                    </a>
                              </li>
                      </ul> -->
              </div>
     </div>
</div>
</body>
<script>
 // 设置相册高度等于宽度
function myresize() {
    var dhtml = document.documentElement;
    var  resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
    var  recalc = function() {
            var  width =$(".xiangce").find("li").eq(0).width( )
            $(".xiangce").find("li").height( width );
        };
    recalc();
        if (!document.addEventListener) return;
        window.addEventListener(resizeEvt, recalc, false);
        document.addEventListener('DOMContentLoaded', recalc, false);
}
myresize() ;
//文章
var arr1=[
   {
     title:"我需要的三件东西",
     name:"张小林",
     wei:"老师",
     text:"的考勤信息水电费第三个是大法官十多个电饭锅东方红发都是合适的",
     src:"../img/5_14.png",
     time:"2018/7/16 18:20",
     num:55
   },
   {
     title:"我需要东西",
     name:"张林",
     wei:"老师",
     text:"的考勤信息水电费第三个是大法官十多个电饭锅东方红发都是合适的",
     src:"../img/5_14.png",
     time:"2018/7/16 18:20",
     num:55
   },
   {
     title:"三件东西",
     name:"小林",
     wei:"老师",
     text:"的考勤信息水电费第三个是大法官十多个电饭锅东方红发都是合适的",
     src:"../img/5_14.png",
     time:"2018/7/16 18:20",
     num:55
   }
];
var str1='';
$.each(arr1,function(i,v) {
   str1 +=  '<div class="text-list">'+
                // '<h4>'+'<a onclick="readText('+i+')">'+v.title+'</a>'+'</h4>'+
                '<a onclick="readText('+i+')"><p>'+(v.text.length>40? v.text.slice(0,40)+'...' :v.text)+'</p></a>'+
                '<div><img src="'+v.src+'"><span>'+v.name+'</span><span>'+v.time+'</span><span>浏览'+v.num+'次</span></div>'+
            '</div>';
})

function readText(i){
   $("#cont-wrap").html(
          '<div class="textCont">'+
             '<h4>'+arr1[i].title+'</h4>'+
             '<div>'+
                '<img src="'+arr1[i].src+'">'+
                '<span class="name">'+arr1[i].name+arr1[i].wei+'</span>'+
                '<span class="time">'+arr1[i].time+'</span>'+
             '</div>'+
             '<p>'+arr1[i].text+'</p>'+
          '</div>'
    );
}
// 相册
var arr2=[
    {title:"相册名称", num:12 ,src:"../img/li_03.jpg",href:"###"},
    {title:"相册名称", num:22 ,src:"../img/li_03.jpg",href:"###"},
    {title:"相册名称", num:91 ,src:"../img/li_03.jpg",href:"###"}
]
var str2='';
$.each(arr2,function(i,v) {
   str2 += '<li>'+
              '<a href="'+v.href+'" >'+
                 '<img src="'+v.src+'">'+
                 '<p><span class="left">'+v.title+'</span><span class="right">'+v.num+'张</span></p>'+
              '</a>'+
           '</li>';
})
str2 = '<ul class="xiangce">'+ 
           // '<li><a href="我的相册.html" style="background:url(../img/jj_03.jpg) no-repeat;background-size:165px;"></li>'+
           '<li><a href="wodexiangce.html" ><img src="../img/jj_03.jpg"></a></li>'+
        str2 +'</ul>';

// 点击切换
var str0 = $("#cont-wrap").html();

var btns = $(".p-head-botm").find("li");
    btns.eq(0).click(function(){
         btns.removeClass("active");
         $(this).addClass("active");
         $(".p-head").height(240);
         $("#cont-wrap").html(str0);
    })
    btns.eq(1).click(function(){
         btns.removeClass("active");
         $(this).addClass("active");
         $(".p-head").height(188);
         $("#cont-wrap").html(str1);
         $(".text-time").each(function(i,v){
               // if(v.innerHTML.length>65){
               //              v.innerHTML = v.innerHTML.slice(0,66) + "...";
               //        }
          });
    });
    btns.eq(2).click(function(){
          btns.removeClass("active");
          $(this).addClass("active");
          $(".p-head").height(188);
          $("#cont-wrap").html(str2);
          myresize() ;
    });

// 发表说说
$("#ssBtn").click(function(){
      var value = $("#ssInp").val();
      if(!value) return;
      var d = $(
              `<div class="weui-cell p-liuyan">
                     <div class="weui-cell__hd p-l-img"><img src="../img/t5.png" ></div>
                     <div class="weui-cell__bd p-l-cont">
                        <p>张晓玲 老师</p>
                        <p class="p-l-time">2018/6/18 08:55</p>
                        <p class="p-b-text">`+value+`</p>
                        <p class="p-l-num">浏览<span>0</span>次 <a class="bg5"></a><a class="bg4"></a></p>
                        <div style="height: 25px; position: relative;margin-top: 5px;display:none;">
                               <input type="text" style="position: absolute;height: 100%; width: 100%;background: #f2f2f2;padding:0 35px 0 5px;">
                               <a class="plBtn" style="position: absolute; width: 30px;line-height: 25px; font-size: 12px; right:0;">评论</a>
                        </div>
                        <div class="p-l-text">
                               <i></i>
                               <p>
                                  <span class="ico-z bg6"></span>
                                  <span class="color1 zan-role"></span>
                                  <span class="color1 zan-num">0</span>
                                  人觉得很赞
                               </p>
                               <ul class="liuyans">
                               </ul>
                        </div>
                     </div>
               </div>`
      );
      $("#cont-wrap").prepend(d);
      $("#ssInp").val("");
})

// 提交评论
var name = "张丽(我)";
$("#cont-wrap").on("click",".bg5",function(){                  //评论输入框显示与隐藏
     if( $(this).parent().next().css("display") == "none"  ){
           $(this).parent().next().slideDown();
     }else{
           $(this).parent().next().slideUp();
     } 
})
$("#cont-wrap").on("click",".plBtn",function(){                //点击发送评论
    var value = $(this).prev().val();
    var  d = $('<li><span class="color1">'+name+' : '+'</span><span>'+value+'</span></li>');
    if( !!value ){
        $(this).parent().next().find('ul').append(d);
    }
    $(this).prev().val('');  
})


$("#cont-wrap").on("click",".bg4",function(){                 //点赞
     if( !this.bool){
           var n1 = +$(this).parent().parent().parent().find(".zan-num").text();
           $(this).parent().parent().parent().find(".zan-num").text( n1+1);
           var n2 = +$(this).parent().find("span").text();
           $(this).parent().find("span").text( n2+1 );

           var str1 = $(this).parent().parent().parent().find(".zan-role").text();  
           var arr = str1.split(",");
           if( arr.length == 1){ var str2 = str1+name }
            if( arr.length > 1 && arr.length <=5 ){ var str2 = str1+", "+name }
            if( arr.length > 5 ){ var str2 = str1  }
           $(this).parent().parent().parent().find(".zan-role").text( str2)
   }
     this.bool = true;
})
</script>

</html>